<template>
    <div style="padding:100px;background:#f1f1f1">
        <h4>修饰符capture：事件在捕获阶段触发，son在冒泡阶段所以最后一个触发</h4>
        <h4>修饰符self：只有是自身的事件触发，捕获冒泡不会触发</h4>
        <div @click.capture="father">
            <div @click.self="self" data="hello">
                我是self
                <son></son>
            </div>
        </div>
    </div>

    <div style="padding:100px;height: 4000px;background:#f1f1f1">
        <h4>修饰符passive：告诉浏览器不阻止默认事件，浏览器无需等待事件处理器的执行结果来告诉浏览器是否需要阻止默认事件，以此提高性能</h4>
        <div class="father">
            <div class="son">
                你好
            </div>
        </div>
    </div>

    <!-- 原生lazy方式 -->
    <!-- <img src="/img/绿巨人.png" loading="lazy"> -->
    <img v-lazy="'/img/绿巨人.png'">

    <div style="height: 3000px;background-color: antiquewhite;"></div>

    <img v-lazy="'/img/牛头.png'">
</template>

<script setup>
import { onMounted } from 'vue'
import son from './son.vue'

defineOptions({
    name: 'modifiers'
})
const father = () => {
    console.log('i am father level-1');
}
const self = () => {
    console.log('i am self');
}
onMounted(() => {
    const fatherEl = document.querySelector('.father')
    fatherEl.addEventListener('wheel', () => {
        console.log('wheel');
        // e.preventDefault()
    }, { passive: true })
    // document.addEventListener('wheel', () => {
    //     console.log('wheel');
    // })
})
</script>

<style scoped>
.father {
    height: 200px;
    width: 250px;
    background: #da5454;
    overflow: auto;
}
.son {
    height: 600px;
    width: 200px;
    background: #f1f1f1;
    margin: 10px;
}
</style>